import { useEffect, useState } from 'react';
import { createStore } from 'redux';
import undoable from 'redux-undo';
import { Provider } from 'react-redux';
import { numberReducer } from '../reducer';

import App from './App';
import { useHistory, useParams } from 'react-router';

const ReduxDemoWithStore: React.FC = function () {
  //   const [store, setStore] = useState<any>();
  //   const history = useHistory();
  //   const params = useParams<{ id: string }>();

  //   setTimeout(() => {
  //     setStore(createStore(undoable(numberReducer)));
  //   }, 3000);

  //   useEffect(() => {
  //     if (store) {
  //       store.dispatch({ type: 'SET', number: parseInt(params.id) });
  //       console.log(params.id);
  //     }
  //   }, [params.id]);

  const store = createStore(undoable(numberReducer));
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );

  //   return store ? (
  //     <Provider store={store}>
  //       <App />
  //       <button
  //         onClick={() => {
  //           history.push(`/ReduxDemo/${Math.floor(Math.random() * 100)}`);
  //         }}
  //       >
  //         跳转
  //       </button>
  //     </Provider>
  //   ) : (
  //     <div>loading...</div>
  //   );
};

export default ReduxDemoWithStore;
